<template>
  <div>
    <div class="header-text">通用设置</div>
    <div class="main-content">
      <el-form>
        <el-form-item label="主题颜色:">
          <el-color-picker
            @change="setColor"
            v-model="color"
            size="small"
            show-alpha
            :predefine="config.predefineColors"
          />
        </el-form-item>
        <el-form-item label="铃声选择:">
          <el-text type="primary" style="margin-right: 12px">
            {{ userStore.userInfo.ringtone.ringtoneName }}
          </el-text>
          <el-popover
            :visible="popoverVisible"
            placement="right"
            :width="570"
            title="铃声选择"
          >
            <template #reference>
              <el-button
                :icon="Edit"
                type="primary"
                @click="popoverVisible = !popoverVisible"
                circle
              />
            </template>
            <el-container style="max-height: 240px">
              <el-aside width="200px">
                <el-scrollbar>
                  <el-menu :default-active="preselectedRingtone.ringtoneFile">
                    <el-menu-item
                      v-for="item in ringtoneList"
                      :index="item.ringtoneFile"
                      @click="preselectedRingtone = item"
                    >
                      {{ item.ringtoneName }}
                    </el-menu-item>
                  </el-menu>
                </el-scrollbar>
              </el-aside>
              <el-main style="display: flex; align-items: center">
                <audio
                  v-if="popoverVisible"
                  controls
                  :src="api + preselectedRingtone.ringtoneFile"
                ></audio>
              </el-main>
            </el-container>
            <div
              style="margin-bottom: 12px; display: flex; justify-content: right"
            >
              <el-button @click="popoverVisible = false">取消</el-button>
              <el-button
                type="primary"
                @click="changeRingtoneSelection(preselectedRingtone)"
                style="margin-right: 12px"
              >
                更改铃声
              </el-button>
            </div>
          </el-popover>
        </el-form-item>
        <!-- <el-form-item label="暗黑模式">
          <el-switch @change="changeDark" v-model="dark" class="mt-2" style="margin-left: 24px" inline-prompt
            active-icon="MoonNight" inactive-icon="Sunny" />
        </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import config from '@/setting'
import useUserStore from '@/store/modules/user'
import { ElMessage } from 'element-plus'
import { reqChangeUserColorTheme } from '@/api/user'
import { RingtonesRes } from '@/api/ringtone/type'
import { reqChangeRingtoneSelection, reqGetAllRingtone } from '@/api/ringtone'
import { Edit } from '@element-plus/icons-vue'

onMounted(() => {
  getRingtoneList()
})

const userStore = useUserStore()
const api = import.meta.env.VITE_APP_BASE_API as string
//颜色组件组件的数据
const color = ref(userStore.userInfo.colorTheme)

const popoverVisible = ref(false)
const preselectedRingtone = ref(userStore.userInfo.ringtone)
const ringtoneList = ref<RingtonesRes[]>([])

const getRingtoneList = async () => {
  try {
    const { data } = await reqGetAllRingtone()
    ringtoneList.value = data
  } catch (error) {
    ElMessage.error((error as Error).message)
  }
}

const changeRingtoneSelection = async (ringtone: RingtonesRes) => {
  try {
    const { message } = await reqChangeRingtoneSelection(ringtone.id)
    popoverVisible.value = false
    ElMessage.success(message)
    userStore.userInfo.ringtone = ringtone
  } catch (error) {
    ElMessage.error((error as Error).message)
  }
}

//收集暗黑模式开关的数据
// const dark = ref<boolean>(false)
//switch开关的chang事件进行暗黑模式的切换
// const changeDark = () => {
//   //获取HTML根节点
//   let html = document.documentElement
//   //判断HTML标签是否有类名dark
//   dark.value ? (html.className = 'dark') : (html.className = '')
// }

//主题颜色的设置
const setColor = async () => {
  try {
    const { message } = await reqChangeUserColorTheme(color.value)
    ElMessage.success(message)
    userStore.userInfo.colorTheme = color.value
    //通知js修改根节点的样式对象的属性与属性值
    const html = document.documentElement
    html.style.setProperty('--el-color-primary', color.value)
    html.style.setProperty('--el-color-primary-light-3', color.value)
  } catch (error) {
    ElMessage.error((error as Error).message)
  }
}
</script>
<style scoped lang="scss">
.header-text {
  font-size: 18px;
  padding: 18px 22px;
  border-bottom: solid 1px var(--el-menu-border-color);
}

.main-content {
  padding: 18px 22px;
}
</style>
